<div id="api-breadcrumb-bar">
    <breadcrumbs>
        <li breadcrumb label="Settings" [route]="[ '/settings' ]"></li>
        <li breadcrumb label="Linked Accounts" class="active"></li>
    </breadcrumbs>
</div>
<page-error [error]="pageError" *ngIf="pageError"></page-error>
<div class="container-fluid" *ngIf="!pageError">
    <div class="row" style="min-height: 35px"></div>
    <div class="row row-cards-pf">
        <div class="col-xs-12 col-sm-2">
            <settings-nav tab="accounts"></settings-nav>
        </div>
        <div class="col-xs-12 col-sm-8">
            <!-- The 'loading linked accounts' card -->
            <div *ngIf="!isLoaded('accounts')">
                <div class="card-pf card-pf-accented">
                    <div class="card-pf-heading">
                        <h1 class="card-pf-title">
                            <p><span class="spinner spinner-xs spinner-inline"></span> Loading linked accounts...</p>
                        </h1>
                    </div>
                </div>
            </div>
            <!-- The list of linked accounts -->
            <div class="list-group list-view-pf" *ngIf="isLoaded('accounts')">
                <!-- GitHub -->
                <div class="list-group-item list-view-pf-stacked account-link"
                     [class.created]="isAccountCreated('GitHub')"
                     [class.not-created]="isAccountMissing('GitHub')"
                     [class.initiated]="isAccountInitiated('GitHub')">
                    <div class="list-view-pf-actions">
                        <button *ngIf="isAccountMissing('GitHub')" class="btn btn-primary" (click)="createLinkedAccount('GitHub')">Link</button>
                        <button *ngIf="isAccountCreated('GitHub')" class="btn btn-danger" (click)="deleteLinkedAccount('GitHub')">Unlink</button>
                        <button *ngIf="isAccountInitiated('GitHub')" class="btn btn-danger" (click)="deleteLinkedAccount('GitHub')">Cancel</button>
                    </div>
                    <div class="list-view-pf-main-info">
                        <div class="list-view-pf-left account-link-icon">
                            <span class="fa fa-fw fa-github"></span>
                        </div>
                        <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                                <div class="list-group-item-heading">GitHub</div>
                                <div class="list-group-item-text">
                                    <span *ngIf="isAccountMissing('GitHub')">Link to your <a href="https://github.com/" target="_blank">GitHub</a> account.</span>
                                    <span *ngIf="isAccountCreated('GitHub')">A link has been established to your <a href="https://github.com/" target="_blank">GitHub</a> account!</span>
                                    <span *ngIf="isAccountInitiated('GitHub')">We're linking your <a href="https://github.com/" target="_blank">GitHub</a> account now.</span>
                                </div>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountMissing('GitHub')">
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountCreated('GitHub')">
                                <span class="fa fa-fw fa-clock-o"></span>
                                <span>Linked on</span>
                                <span class="account-link-date">{{ account('GitHub').linkedOn | date }}</span>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountInitiated('GitHub')">
                                <span class="fa fa-fw fa-info"></span>
                                <span>Link initiated, awaiting completion...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- GitLab -->
                <div class="list-group-item list-view-pf-stacked account-link"
                     [class.created]="isAccountCreated('GitLab')"
                     [class.not-created]="isAccountMissing('GitLab')"
                     [class.initiated]="isAccountInitiated('GitLab')">
                    <div class="list-view-pf-actions">
                        <button *ngIf="isAccountMissing('GitLab')" class="btn btn-primary" (click)="createLinkedAccount('GitLab')">Link</button>
                        <button *ngIf="isAccountCreated('GitLab')" class="btn btn-danger" (click)="deleteLinkedAccount('GitLab')">Unlink</button>
                        <button *ngIf="isAccountInitiated('GitLab')" class="btn btn-danger" (click)="deleteLinkedAccount('GitLab')">Cancel</button>
                    </div>
                    <div class="list-view-pf-main-info">
                        <div class="list-view-pf-left account-link-icon">
                            <span class="fa fa-fw fa-gitlab"></span>
                        </div>
                        <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                                <div class="list-group-item-heading">GitLab</div>
                                <div class="list-group-item-text">
                                    <span *ngIf="isAccountMissing('GitLab')">Link to your <a href="https://gitlab.com/" target="_blank">GitLab</a> account.</span>
                                    <span *ngIf="isAccountCreated('GitLab')">A link has been established to your <a href="https://gitlab.com/" target="_blank">GitLab</a> account!</span>
                                    <span *ngIf="isAccountInitiated('GitLab')">We're linking your <a href="https://gitlab.com/" target="_blank">GitLab</a> account now.</span>
                                </div>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountMissing('GitLab')">
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountCreated('GitLab')">
                                <span class="fa fa-fw fa-clock-o"></span>
                                <span>Linked on</span>
                                <span class="account-link-date">{{ account('GitLab').linkedOn | date }}</span>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountInitiated('GitLab')">
                                <span class="fa fa-fw fa-info"></span>
                                <span>Link initiated, awaiting completion...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Bitbucket -->
                <div class="list-group-item list-view-pf-stacked account-link"
                     [class.created]="isAccountCreated('Bitbucket')"
                     [class.not-created]="isAccountMissing('Bitbucket')"
                     [class.initiated]="isAccountInitiated('Bitbucket')">
                    <div class="list-view-pf-actions">
                        <button *ngIf="isAccountMissing('Bitbucket')" class="btn btn-primary" (click)="createLinkedAccount('Bitbucket')">Link</button>
                        <button *ngIf="isAccountCreated('Bitbucket')" class="btn btn-danger" (click)="deleteLinkedAccount('Bitbucket')">Unlink</button>
                        <button *ngIf="isAccountInitiated('Bitbucket')" class="btn btn-danger" (click)="deleteLinkedAccount('Bitbucket')">Cancel</button>
                    </div>
                    <div class="list-view-pf-main-info">
                        <div class="list-view-pf-left account-link-icon">
                            <span class="fa fa-fw fa-bitbucket"></span>
                        </div>
                        <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                                <div class="list-group-item-heading">Bitbucket</div>
                                <div class="list-group-item-text">
                                    <span *ngIf="isAccountMissing('Bitbucket')">Link to your <a href="https://bitbucket.org/" target="_blank">Bitbucket</a> account.</span>
                                    <span *ngIf="isAccountCreated('Bitbucket')">A link has been established to your <a href="https://bitbucket.org/" target="_blank">Bitbucket</a> account!</span>
                                    <span *ngIf="isAccountInitiated('Bitbucket')">We're linking your <a href="https://bitbucket.org/" target="_blank">Bitbucket</a> account now.</span>
                                </div>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountMissing('Bitbucket')">
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountCreated('Bitbucket')">
                                <span class="fa fa-fw fa-clock-o"></span>
                                <span>Linked on</span>
                                <span class="account-link-date">{{ account('Bitbucket').linkedOn | date }}</span>
                            </div>
                            <div class="list-view-pf-additional-info" *ngIf="isAccountInitiated('Bitbucket')">
                                <span class="fa fa-fw fa-info"></span>
                                <span>Link initiated, awaiting completion...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
